<template>
    <div>
      <h2 style="text-align: center;">我的订单</h2>
      <el-row :gutter="20">       
       <el-col :span="24">
         <div>
         </div>
         <el-card
      v-for="order in orderList"
      :key="`${order.passengerNumber}-${order.flightNumber}`"
      class="card-item"
      :body-style="{ padding: '20px' }"
      shadow="always">
      <div class="card-header">
        <span class="card-title">{{ order.flightNumber }}</span>
       
      </div>
      <div class="card-content">
        <el-button type="text" size="medium" @click="returnTicket(order)">退票</el-button><br>
        <el-button type="text" size="medium" @click="changeTicket(order)">改签</el-button>
        <p><strong>航空公司:</strong> {{ order.airline }}</p>
        <p><strong>出发地:</strong> {{ order.departureCity }}</p>
        <p><strong>出发机场:</strong> {{ order.departureAirport }}</p>
        <p><strong>目的地:</strong> {{ order.arrivalCity }}</p>
        <p><strong>目的机场:</strong> {{ order.arrivalAirport }}</p>
        <p><strong>起飞时间:</strong> {{ order.departureTime }}</p>
        <p><strong>到达时间:</strong> {{ order.arrivalTime }}</p>
        <p><strong>航班状态:</strong> {{ order.flightStatus }}</p>
        <p><strong>价格:</strong> {{ order.price }}</p>
        <p><strong>座位类型:</strong> {{ order.ticketType }}</p>
        <p><strong>身份证号:</strong> {{ order.passengerNumber }}</p>
        <p><strong>乘机人:</strong> {{ order.passengerName }}</p>
        <p><strong>下单时间:</strong> {{ order.bookingTime }}</p>
        <p><strong>订单状态:</strong> {{ order.orderStatus }}</p>
      </div>
    </el-card>
   <el-row style="margin-top: 10px;text-align: center;" >
    <el-pagination
  background
  layout="prev, pager, next"
  :total="total"
  :page-size="pageSize"
  prev-text="上一页"
  next-text="下一页"
  @next-click="getOrderPage(pageNo+1,pageSize)"
  @prev-click="getOrderPage(pageNo-1,pageSize)"
  @current-change="handleCurrentChange"
  v-if="isPaginationVisable">
  </el-pagination>
   </el-row>
       </el-col>
      </el-row>
      <!-- 查看机票Drawer -->
    <el-drawer
title="当前航班机票列表"
:visible.sync="ticketDrawer"
direction="rtl"
size="50%">
 <el-table :data="ticketList">
    <el-table-column property="type" label="类型" width="150"></el-table-column>
    <el-table-column property="count" label="剩余数量" width="150"></el-table-column>
    <el-table-column property="price" label="价格" width="150"></el-table-column>
    <el-table-column
      label="操作"
      width="140"
      fixed="right">  
        <template v-slot="props">
        <el-button type="success" @click="selectChangeTicket(props.row)">选择</el-button>
      </template>
      </el-table-column>
  </el-table>
</el-drawer>
      <!-- 改签航班列表Drawer -->
      <el-drawer
  title="可选航班列表"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose"
  size="80%">
  <el-table
    :data="flightList"
    style="width: 100%"
    >
    
    <el-table-column
      prop="flightNumber"
      label="航班号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="airline"
      label="航空公司"
      width="120">
    </el-table-column>
    <el-table-column
      prop="departureCity"
      label="出发地"
      width="100">
    </el-table-column>
    <el-table-column
      prop="departureAirport"
      label="出发机场"
      width="140">
    </el-table-column>
    <el-table-column
      prop="arrivalCity"
      label="目的地"
      width="100">
    </el-table-column>
    <el-table-column
      prop="arrivalAirport"
      label="目的机场"
      width="140">
    </el-table-column>
    <el-table-column
      prop="departureTime"
      label="起飞时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="arrivalTime"
      label="到达时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="status"
      label="航班状态"
      width="100">
    </el-table-column>
    <el-table-column
    label="操作"
    width="140"
    fixed="right">
    <template v-slot="props">
      <el-button type="text" @click="Toticket(props.row.flightId)">查看机票</el-button>
    </template>
    </el-table-column>
  </el-table>
 <el-row style="margin-top: 10px;text-align: center;" >
  <el-pagination
background
layout="prev, pager, next"
:total="totalFlight"
:page-size="pageSize"
prev-text="上一页"
next-text="下一页"
@next-click="getFlightPage(pageNoFlight+1,pageSizeFlight)"
@prev-click="getFlightPage(pageNoFlight-1,pageSizeFlight)"
@current-change="handleCurrentFlightChange"
>
</el-pagination>
 </el-row>
</el-drawer>
    </div>
  </template>
  <script>
  import axios from 'axios';
  import { mapGetters } from 'vuex';
    export default {
      computed: {
      ...mapGetters([
        'name',
        'userId'
      ])
      },
      created() {
      // 在组件创建时，将 userId 的值赋给 data 中的 localUserId
      this.localUserId = this.userId
    },
      data() {
        return {
          pageNoFlight:1,
          ticketDrawer:false,
          pageSizeFlight:8,
          totalFlight:0,
          direction: 'rtl',
          drawer:false,
          isPaginationVisable:true,
          localUserId:'',
          pageNo:1,
          pageSize:3,
          total:0,
          order:{
            orderId:'',
            flightId:'',
            ticketId:'',
            flightNumber:'',
            departureCity:'',
            arrivalCity:'',
            departureAirport:'',
            arrivalAirport:'',
            departureTime:'',
            arrivalAirport:'',
            airline:'',
            flightStatus:'',
            price:'',
            ticketType:'',
            passengerId:'',
            passengerNumber:'',
            passengerName:'',
            bookingTime:'',
            orderStatus:'',
            userId:''
          } ,
          orderList:[],
          flight:{
          flightId:undefined,
          flightNumber:'',
          airline:'',
          departureCity:'',
          arrivalCity:'',
          departureAirport:'',
          arrivalAirport:'',
          status:'',
          departureTime:'',
          arrivalTime:'',
        },
        flightList:[],
        ticket:{
          ticketId:undefined,
          flightId:undefined,
          price:'',
          type:'',
          count:'',
        }, 
        ticketList:[],
        }
      },
      mounted(){
        this.getOrderPage(this.pageNo,this.pageSize)
      },
      methods:{
        /**
         * 选择改签的机票
         */
         selectChangeTicket(row){
            const lastTicketId=this.order.ticketId
            console.log("票号",lastTicketId)
            this.order.flightId=this.flight.flightId
            this.order.ticketId=row.ticketId
            console.log(this.order)
            axios.post("http://localhost:8082/order/updateOrder",JSON.stringify(this.order),
            {
    params: { lastTicketId: lastTicketId },
    headers: {
        'Content-Type': 'application/json'
    }
}).then(resp=>{
              console.log(resp)
              if(resp.data.code===0){
                //关闭对话框
                this.drawer=false
                this.ticketDrawer=false
                //获取分页数据
                this.getOrderPage(this.pageNo,this.pageSize)
                this.$message.success('改签成功')
              }else{
                this.$message.error(resp.data.message)
              }
            }
            )
         },
        /**
       * 处理当前航班页
       */
      handleCurrentFlightChange(current){
        this.pageNoFlight=current
        this.getFlightPage(this.pageNoFlight,this.pageSizeFlight)
      },
        /**
       * 查看机票按钮
       */
      Toticket(flightId){
        this.flight.flightId=flightId,
        console.log("2222222222========",this.flight.flightId)
        this.ticketDrawer=true
        console.log(flightId)
        axios.get("http://localhost:8082/ticket/selectTicketByFlightId",{
          params:{
            flightId:flightId
          }
        }).then(resp=>{
          console.log("------->",resp)
          this.ticketList=resp.data.data
          console.log("1111111111========",flightId)
          this.flight.flightId=flightId
        })
      },
        /**
       * 分页获取航班信息的函数
       */
        getFlightPage(pageNoFlight,pageSizeFlgiht){
        this.pageNoFlight=pageNoFlight
        this.pageSizeFlight=pageSizeFlgiht
        console.log('909090909090',this.order)
        axios.get("http://localhost:8082/flight/getFlightsPage",{
          params:{
            pageNo:this.pageNoFlight,
            pageSize:this.pageSizeFlight,
            arrivalCity:this.order.arrivalCity,
            departureCity:this.order.departureCity,
            airline:this.order.airline
          }
        }).then(resp=>{
          console.log("------->",resp)
          // 获取数据
        let flights = resp.data.data.page;

        // 从列表中移除 flightId
        this.flightList = flights.filter(flight => flight.flightId !== this.order.flightId);
        this.totalFlight=resp.data.data.total
        })
      },
        /**
         * Drawer关闭按钮
         */
         handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
        /**
         * 改签按钮
         */
         changeTicket(order){
            if(order.orderStatus==='已支付'){
                this.drawer=true
                this.order=order
                this.getFlightPage(this.pageNoFlight,this.pageSizeFlight)
            }
            else{
                this.$message.error('当前订单已退款')
                
            }
            
         },
        /**
         * 退票按钮
         */
         returnTicket(order){
            console.log("order",order)
            if(order.orderStatus==='已支付'){
            this.$confirm('是否退票', '退票提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            axios.post("http://localhost:8082/order/returnTicket",JSON.stringify(order),{
              headers:{
              'Content-Type':'application/json'
            }
            }).then(resp=>{
              console.log(resp)
              if(resp.data.code===0){
                //获取分页数据
                this.getOrderPage(this.pageNo,this.pageSize)
                this.$message.success("退票成功")
              }else{
                this.$message.error(resp.data.message)
              }
            }
            );
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '已取消退票'
          });          
        });
        }    
        else{
            this.$message.error('当前订单已退款')
        }    
         },
        
        /**
         * 刷新按钮事件
         */
         refreshBtn(){
          this.getOrderPage(this.pageNo,this.pageSize);
         },
      
        
        /**
         * 处理当前页
         */
        handleCurrentChange(current){
          this.pageNo=current
          this.getOrderPage(this.pageNo,this.pageSize)
        },
        /**
         * 分页获取订单信息的函数
         */
        getOrderPage(pageNo,pageSize){
          this.pageNo=pageNo
          this.pageSize=pageSize
          console.log(pageNo)
          console.log(pageSize)
          axios.get("http://localhost:8082/order/getOrdersByUserId",{
            params:{
              pageNo:this.pageNo,
              pageSize:this.pageSize,
              userId:this.localUserId
            }
          }).then(resp=>{
            console.log("订单信息：",resp)
            this.orderList=resp.data.data.page
            this.total=resp.data.data.total
          })
        },
        
        
        /**
         * 表单重置
         */
         resetForm(flightForm){
          //只能重置成flight对象的数据
          this.$refs[flightForm].resetFields();
          this.flight=this.$options.data().flight
         },
      }
    }
    
  </script>
  <style>
  
  
  </style>